<!DOCTYPE html>
<html>

<head lang="en">
	<meta charset="utf-8">
	<title>轮播图管理</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" href="../../layui/css/layui.css">
	<link rel="stylesheet" href="../../xznstatic/css/common.css" />
	<link rel="stylesheet" href="../../xznstatic/css/style.css" />
	<script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<style>
	html::after {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		content: '';
		display: block;
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
	}

	#test1 {
		overflow: hidden;
	}

	#test1 .layui-carousel-ind li {
		width: 50px;
		height: 1px;
		border-width: 0;
		border-style: solid;
		border-color: rgba(1, 1, 1, 0.3);
		border-radius: 30px;
		background-color: rgba(255, 0, 0, 1);
		box-shadow: 0 0 0px rgba(255, 0, 0, .8);
	}

	#test1 .layui-carousel-ind li.layui-this {
		width: 50px;
		height: 10px;
		border-width: 0;
		border-style: solid;
		border-color: rgba(0, 0, 0, 0.3);
		border-radius: 50px;
		background-color: rgba(0, 112, 126, 1);
		box-shadow: 0 0 0px rgba(15, 98, 108);
	}

	// 列表
	.recommend {
		padding: 10px 0;
		display: flex;
		justify-content: center;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}

	.recommend .box {
		width: 1002px;
		margin: 0 auto;
	}

	.recommend .box .title {
		padding: 10px 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
	}

	.recommend .box .title span {
		padding: 0 10px;
		font-size: 16px;
		line-height: 1.4;
	}

	.recommend .box .filter {
		padding: 0 10px;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		flex-wrap: wrap;
	}

	.recommend .box .filter .item-list {
		display: flex;
		align-items: center;
	}

	.recommend .box .filter .item-list .lable {
		font-size: 14px;
		color: #333;
		box-sizing: border-box;
	}

	.recommend .box .filter .item-list input {
		padding: 0 10px;
		box-sizing: border-box;
		outline: none;
	}

	.recommend .box .filter button {
		display: flex;
		padding: 0 10px;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		outline: none;
	}

	.recommend .box .filter button i {
		margin-right: 4px;
	}

	.recommend .box .list {
		display: flex;
		flex-wrap: wrap;
	}

	.recommend .box .list .list-item {
		flex: 0 0 25%;
		padding: 0 5px;
		box-sizing: border-box;
	}

	.recommend .box .list .list-item .list-item-body {
		cursor: pointer;
		border: 1px solid rgba(0, 0, 0, 3);
		padding: 5px;
		box-sizing: border-box;
	}

	.recommend .box .list .list-item-body img {
		width: 100%;
		height: 100px;
		display: block;
		margin: 0 auto;
	}

	.recommend .box .list .list-item-body .info {
		display: flex;
		flex-wrap: wrap;
	}

	.recommend .box .list .list-item-body .info .price {
		padding-top: 5px;
		color: red;
		font-size: 14px;
		text-align: center;
		box-sizing: border-box;
	}

	.recommend .box .list .list-item-body .info .name {
		padding-top: 5px;
		color: red;
		font-size: 14px;
		text-align: center;
		box-sizing: border-box;
	}

	.recommend .box .list .list-item3 {
		flex: 0 0 33.33%;
	}

	.recommend .box .list .list-item5 {
		flex: 0 0 20%;
	}

	.recommend .box .news {
		display: flex;
		flex-wrap: wrap;
		padding: 0;
		width: 100%;
	}

	.recommend .box .news .list-item {
		flex: 0 0 20%;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.recommend .box .news .list-item .list-item-body {
		cursor: pointer;
		border: 1px solid rgba(0, 0, 0, 3);
		padding: 10px;
		box-sizing: border-box;
		display: flex;
	}

	.recommend .box .news .list-item .list-item-body img {
		width: 120px;
		height: 100%;
		display: block;
		margin: 0 auto;
	}

	.recommend .box .news .list-item .list-item-body .item-info {
		flex: 1;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		padding-left: 10px;
		box-sizing: border-box;
	}

	.recommend .box .news .list-item .list-item-body .item-info .name {
		padding-top: 5px;
		color: red;
		font-size: 14px;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.recommend .box .news .list-item .list-item-body .item-info .time {
		padding-top: 5px;
		color: red;
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		box-sizing: border-box;
	}

	.recommend .box .news .list-item1 {
		flex: 0 0 100%;
	}

	.recommend .box .news .list-item3 {
		flex: 0 0 33.33%;
	}

	.index-pv1 .animation-box:hover {
		transform: perspective(5000px) translate3d(20px, 0px, 0px) scale(1.0) rotate(0deg) skew(10deg, 0deg);
		transition: all 0.5s;
	}

	.layui-laypage .layui-laypage-count {
		padding: 0 10px;
	}

	.layui-laypage .layui-laypage-skip {
		padding-left: 10px;
	}
</style>

<body>
	<div id="app">
		<div class="banner">
			<div class="layui-carousel" id="test1"
				:style='{"boxShadow":"0 0 6px rgba(15,98,108)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
				<div carousel-item>
					<div v-for="(item,index) in swiperList" :key="index">
						<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
					</div>
				</div>
			</div>
		</div>
		<div class="recommend index-pv1"
			:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 5px rgba(51, 140, 145, 1)","margin":"10px 0 0 0","borderColor":"rgba(255, 204, 0, 1)","backgroundColor":"rgba(255, 255, 255, 1)","borderRadius":"20px","borderWidth":"0","borderStyle":"solid"}'>
			<div class="box" style='width:80%'>
				<div class="title"
					:style='{"padding":"10px 0px 10px 0","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 10px 0","borderColor":"rgba(5, 187, 154, 1)","backgroundColor":"rgba(5, 187, 154, 1)","borderRadius":"4px","borderWidth":"2px","borderStyle":"solid","justifyContent":"space-between","height":"54px"}'>
					<span
						:style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(255,0,0,1)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(255, 255, 255, 1)","borderRadius":"0 0 2px 0","borderWidth":"0","fontSize":"18px","borderStyle":"solid"}'>轮播图管理</span><span
						:style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","borderWidth":"0","fontSize":"14px","borderStyle":"solid"}'>您现在的位置：轮播图管理</span>
				</div>
				<form class="layui-form filter"
					:style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 10px 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 255, 255, 0.53)","borderRadius":"0px","alignItems":"flex-start","borderWidth":"2px","borderStyle":"none none solid none ","justifyContent":"flex-end","height":"64px"}'>
					<div class="item-list">
						<div class="lable"
							:style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#fff","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>
							名称</div>
						<input type="text"
							:style='{"boxShadow":"0 0 0px rgba(255,0,0,0)","borderColor":"rgba(0, 112, 126, 1)","backgroundColor":"rgba(255, 255, 255, 0.49)","color":"#333","borderRadius":"8px","textAlign":"center","borderWidth":"2px","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}'
							name="name" id="name" placeholder="名称" autocomplete="off" class="layui-input">
					</div>
					<button
						:style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"rgba(255, 0, 0, 1)","backgroundColor":"rgba(255, 0, 0, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"20px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}'
						id="btn-search" type="button" class="layui-btn layui-btn-normal">
						<i v-if="true" class="layui-icon layui-icon-search"></i>搜索
					</button>
					<button
						:style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"rgba(255, 0, 0, 1)","backgroundColor":"rgba(255, 0, 0, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"20px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}'
						v-if="isAuth('config','新增')" @click="jump('../config/add.html')" type="button" class="layui-btn btn-theme">
						<i v-if="true" class="layui-icon">&#xe654;</i>添加
					</button>
				</form>
				<!-- 样式一 -->
				<div class="list" style="position: relative;">
					<div @click="jump('../config/detail.html?id='+item.id)" v-for="(item,index) in dataList" :key="index"
						class="list-item" :class="4=='3'?'list-item3':4=='5'?'list-item5':''">
						<div class="list-item-body animation-box"
							:style='{"padding":"10px","boxShadow":"0 0 6px rgba(0, 112, 126, 1)","margin":"0 0 10px 0","borderColor":"rgba(0, 112, 126, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0","borderStyle":"solid"}'>
							<div class="info">
								<div v-if="item.price"
									:style='{"padding":"0","margin":"10px 0 0 0","backgroundColor":"rgba(0,0,0,0)","color":"red","borderRadius":"0","textAlign":"right","width":"100%","fontSize":"12px"}'
									class="price">{{item.price}} RMB</div>
							</div>
						</div>
					</div>
				</div>
				<div class="pager" id="pager" :style="{textAlign:2==1?'left':2==2?'center':'right'}"></div>
			</div>
		</div>


	</div>

	<script src="../../layui/layui.js"></script>
	<script src="../../js/vue.js"></script>
	<script src="../../js/config.js"></script>
	<script src="../../modules/config.js"></script>
	<script src="../../js/utils.js"></script>

	<script type="text/javascript">
		var vue = new Vue({
			el: '#app',
			data: {
				swiperList: [],
				dataList: [],
				swiperIndex: '-1'
			},
			filters: {
				newsDesc: function (val) {
					if (val) {
						if (val.length > 60) {
							return val.substring(0, 60).replace(/<[^>]*>/g).replace(/undefined/g, '');
						} else {
							return val.replace(/<[^>]*>/g).replace(/undefined/g, '');
						}
					}
					return '';
				}
			},
			methods: {
				isAuth(tablename, button) {
					return isFrontAuth(tablename, button)
				},
				jump(url) {
					jump(url)
				}
			}
		});

		layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery'], function () {
			var layer = layui.layer;
			var element = layui.element;
			var carousel = layui.carousel;
			var laypage = layui.laypage;
			var http = layui.http;
			var jquery = layui.jquery;

			var limit = 8;

			// 获取轮播图 数据
			http.request('config/list', 'get', {
				page: 1,
				limit: 5
			}, function (res) {
				if (res.data.list.length > 0) {
					let swiperList = [];
					res.data.list.forEach(element => {
						if (element.value != null) {
							swiperList.push({
								img: element.value
							});
						}
					});
					vue.swiperList = swiperList;

					vue.$nextTick(() => {
						carousel.render({
							elem: '#test1',
							width: '100%',
							height: '400px',
							arrow: 'hover',
							anim: 'fade',
							autoplay: 'true',
							interval: '3000',
							indicator: 'inside'
						});

					})
					// vue.$nextTick(()=>{
					//   window.xznSlide();
					// });
				}
			});


			// 分页列表
			pageList();

			// 搜索按钮
			jquery('#btn-search').click(function (e) {
				pageList();
			});

			function pageList() {
				var param = {
					page: 1,
					limit: limit
				}


				if (jquery('#name').val()) {
					param['name'] = jquery('#name').val() ? '%' + jquery('#name').val() + '%' : '';
				}



				// 获取列表数据
				http.request('config/list', 'get', param, function (res) {
					vue.dataList = res.data.list
					// 分页
					laypage.render({
						elem: 'pager',
						count: res.data.total,
						limit: limit,
						groups: 4,
						layout: ["prev", "page", "next"],
						theme: '#009688',
						jump: function (obj, first) {
							param.page = obj.curr;
							//首次不执行
							if (!first) {
								http.request('config/list', 'get', param, function (res) {
									vue.dataList = res.data.list
								})
							}
						}
					});
				})
			}
		});

		window.xznSlide = function () {
			jQuery(".banner").slide({ mainCell: ".bd ul", autoPlay: true, interTime: 5000 });
			jQuery("#ifocus").slide({ titCell: "#ifocus_btn li", mainCell: "#ifocus_piclist ul", effect: "leftLoop", delayTime: 200, autoPlay: true, triggerTime: 0 });
			jQuery("#ifocus").slide({ titCell: "#ifocus_btn li", mainCell: "#ifocus_tx ul", delayTime: 0, autoPlay: true });
			jQuery(".product_list").slide({ mainCell: ".bd ul", autoPage: true, effect: "leftLoop", autoPlay: true, vis: 5, trigger: "click", interTime: 4000 });
		};
	</script>
</body>

</html>